<script setup>
import HomePanel from './HomePanel.vue'
import { getGoodsAPI } from '@/apis/home'
import { ref,onMounted} from 'vue'
// 导入商品列表组件封装GoodItems组件
import GoodsItem from './GoodsItem.vue'
const goodsProduct = ref([])
const getGoods = async () => {
  const res = await getGoodsAPI()
  console.log(res);
  goodsProduct.value = res.data
}
onMounted( ()=> getGoods() )
</script>

<template>
    <!-- 具名插槽进行传递给父组件 -->
    <HomePanel title="全部商品" sub-title="人气爆款 不容错过">
    <template #main>
      <ul class="goods-list">
        <li v-for="item in goodsProduct" :key="item.id">
          <RouterLink to="/">
            <!-- <img v-img-lazy="item.picture" alt=""> -->
            <img v-img-lazy="item.picture" alt="">
            <p class="name">{{ item.name }}</p>
            <p class="price">￥{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
    </template>
  </HomePanel>
</template>

<style scoped lang='scss'>
  .goods-list {
      width: 990px;
      display: flex;
      flex-wrap: wrap;
      margin: auto;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
</style>